<template>
  <div id="home">
    <div class="home-1">
      <el-row :gutter="24">
        <!-- 分类-->
        <el-col :span="6" class="home-type">
          <div>
            <div style="margin-bottom: 10px">
              <el-text size="large" tag="b"> 分类</el-text>
              <el-button size="small" text type="primary" @click="toTypeView"
                >更多
              </el-button>
            </div>
            <el-space direction="vertical">
              <el-space v-for="item in typeList" :key="item.value">
                <span :class="'icon-' + item.icon" class="el-icon"></span>
                <template v-for="(ch, index) in item.children" :key="ch.value">
                  <el-text class="type-text" @click="toSearch(ch.label)">
                    {{ ch.label }}
                  </el-text>
                  <el-text v-if="index < item.children.length - 1">/</el-text>
                </template>
              </el-space>
            </el-space>
          </div>
        </el-col>
        <!-- 轮播图-->
        <el-col :span="12">
          <el-carousel
            v-if="bannerList.oneBanner.length"
            class="border-radius-15 carousel-1"
            height="210px"
            motion-blur
          >
            <!--<el-carousel-item v-for="item in 7" :key="item">-->
            <!--  <el-image style="width: 100%" :src="Img" fit="contain"></el-image>-->
            <!--</el-carousel-item>-->
            <el-carousel-item
              v-for="item in bannerList.oneBanner"
              :key="item.toPath"
              @click="toViewByBanner(item)"
            >
              <el-image
                :src="item.image"
                fit="cover"
                loading="lazy"
                style="width: 100%"
              />
            </el-carousel-item>
          </el-carousel>
          <el-row :gutter="12" style="margin-top: 10px">
            <el-col :span="12">
              <el-carousel
                v-if="bannerList.twoBanner.length"
                :interval="3100"
                class="border-radius-15 carousel-2"
                height="160px"
                indicator-position="none"
                motion-blur
              >
                <!--<el-carousel-item v-for="item in 7" :key="item">-->
                <!--  <el-image style="width: 100%" :src="Banner"></el-image>-->
                <!--</el-carousel-item>-->
                <el-carousel-item
                  v-for="item in bannerList.twoBanner"
                  :key="item.toPath"
                  @click="toViewByBanner(item)"
                >
                  <el-image
                    :src="item.image"
                    loading="lazy"
                    style="width: 100%"
                  />
                </el-carousel-item>
              </el-carousel>
            </el-col>
            <el-col :span="12">
              <!-- 有数据再加载dom-->
              <el-carousel
                v-if="bannerList.threeBanner.length"
                :interval="3200"
                class="border-radius-15 carousel-3"
                height="160px"
                indicator-position="none"
                motion-blur
              >
                <el-carousel-item
                  v-for="item in bannerList.threeBanner"
                  :key="item.toPath"
                  @click="toViewByBanner(item)"
                >
                  <el-image
                    :src="item.image"
                    oading="lazy"
                    style="width: 100%"
                  />
                </el-carousel-item>
                <!--<el-carousel-item v-for="item in 7" :key="item">-->
                <!--  <el-image style="width: 100%" :src="Banner"></el-image>-->
                <!--</el-carousel-item>-->
              </el-carousel>
            </el-col>
          </el-row>
        </el-col>
        <!-- 个人页面-->
        <el-col :span="6" class="home-info">
          <div v-if="!userInfo?.id">
            <div>
              <el-row :gutter="12">
                <!-- 头像-->
                <el-col :span="5">
                  <el-avatar
                    :size="50"
                    :src="userInfo?.avatar || LOGO"
                    alt="无"
                    oading="lazy"
                  />
                </el-col>
                <!-- 招呼语 -->
                <el-col :span="10">
                  <div>
                    <el-text style="font-size: 20px; font-weight: bold"
                      >{{ getGreeting() }}
                    </el-text>
                  </div>
                  <div>
                    <el-space>
                      <el-text
                        class="text-link"
                        type="info"
                        @click="toView('user')"
                        >注册
                      </el-text>
                      <el-text type="info">|</el-text>
                      <el-text
                        class="text-link"
                        type="info"
                        @click="toView('business')"
                        >开店
                      </el-text>
                    </el-space>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div style="margin: 10px 0">
              <div style="text-align: center">
                <span style="font-weight: bold; font-size: 20px">
                  登录后更多精彩
                </span>
              </div>
              <div style="width: 70%; margin: 10px auto">
                <el-button
                  style="width: 100%"
                  type="primary"
                  @click="toView('login')"
                  >立即登录
                </el-button>
              </div>
            </div>
          </div>
          <div v-else style="margin: 10px 0 20px">
            <el-avatar
              :size="100"
              :src="userInfo?.avatar"
              alt="无"
              style="margin: 0 auto; display: block"
            />
          </div>
          <!-- 图标-->
          <div>
            <el-row>
              <el-col :span="6">
                <el-space
                  :size="4"
                  class="text-link"
                  direction="vertical"
                  @click="toView('collect')"
                >
                  <span class="icon-shoucang el-icon home-icon"></span>
                  <el-text class="text-link" size="small">我的收藏</el-text>
                </el-space>
              </el-col>
              <el-col :span="6">
                <el-space
                  :size="4"
                  class="text-link"
                  direction="vertical"
                  @click="toView('orders')"
                >
                  <span class="icon-maiguodedian el-icon home-icon"></span>
                  <el-text class="text-link" size="small">我的订单</el-text>
                </el-space>
              </el-col>
              <el-col :span="6">
                <el-space
                  :size="4"
                  class="text-link"
                  direction="vertical"
                  @click="toView('address')"
                >
                  <span class="icon-dianpu el-icon home-icon"></span>
                  <el-text class="text-link" size="small">我的地址</el-text>
                </el-space>
              </el-col>
              <el-col :span="6">
                <el-space
                  :size="4"
                  class="text-link"
                  direction="vertical"
                  @click="toView('history')"
                >
                  <span class="icon-wodezuji el-icon home-icon"></span>
                  <el-text class="text-link" size="small">我的足迹</el-text>
                </el-space>
              </el-col>
            </el-row>
          </div>
          <el-divider>
            <template #default>
              <el-tooltip content="查看更多公告">
                <el-space class="text-link">
                  <span>公告</span>

                  <span class="icon-gonggao el-icon"></span>
                </el-space>
              </el-tooltip>
            </template>
          </el-divider>
          <!-- 公告-->
          <div style="margin-top: 10px">
            <el-space direction="vertical" fill style="width: 100%">
              <el-row
                v-for="(item, i) in noticeList as NoticeVO[]"
                :key="item.id"
              >
                <el-col :span="3">
                  <el-tag :type="getType(i + 1)" size="small"
                    >{{ i + 1 }}
                  </el-tag>
                </el-col>
                <el-col :span="21">
                  <el-text
                    :line-clamp="1"
                    class="text-link"
                    @click="openNoticeDialog(item)"
                  >
                    {{ item.title }}
                  </el-text>
                </el-col>
              </el-row>
            </el-space>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="home-2">
      <el-segmented
        v-model="value"
        :options="options"
        block
        style="position: sticky; top: 0; z-index: 100"
      />
      <goods-info-cart :data="likeGoodsList" />
      <front-footer />
    </div>
    <notice-dialog
      :data="noticeData"
      :open-flag="openFlag"
      @close="handleNoticeClose"
    />
  </div>
</template>
<script lang="ts" setup>
//获取全部分类
import { ref } from "vue";
import { useRouter } from "vue-router";
import {
  BannerControllerService,
  BannerFront,
  BannerFrontVO,
  CommonUserInfoVO,
  GoodsControllerService,
  GoodsEsDto,
  GoodsTypeControllerService,
  GoodsTypeOption,
  NoticeControllerService,
  NoticeVO,
} from "@/api";
import { useSearchStore, useUserStore } from "@/store";
import GoodsInfoCart from "@/components/GoodsInfoCart.vue";
import FrontFooter from "@/components/FrontFooter.vue";
import NoticeDialog from "@/components/NoticeDialog.vue";
import LOGO from "@/assets/logo.png";

//获取登录用户信息
const useStore = useUserStore();
const userInfo = ref<CommonUserInfoVO>();
if (useStore.token.trim().length > 0) userInfo.value = useStore.userInfo;

const value = ref("猜你喜欢");

const options = ["猜你喜欢", "爆款推荐", "馋嘴零食", "居家优品", "潮店好物"];
const router = useRouter();

// 跳转到分类页
function toTypeView() {
  router.push("/type");
}

const useSearch = useSearchStore();

//前往搜索
function toSearch(keyword: string) {
  //添加历史记录
  useSearch.addSearch(keyword);
  // 跳转到路由
  router.push({
    path: "/search",
    query: {
      keyword: keyword,
    },
  });
}

//查询首页分类数据
const typeList = ref<Array<GoodsTypeOption>>([]);

// 获取分类
async function getTypeList() {
  await GoodsTypeControllerService.getGoodsTypeOptionUsingGet().then((res) => {
    typeList.value = res.data || [];
  });
}

getTypeList();
const bannerList = ref<BannerFrontVO>({
  oneBanner: [],
  twoBanner: [],
  threeBanner: [],
});

// 获取轮播图
async function getBannerList() {
  await BannerControllerService.getFrontBannerUsingGet().then((res) => {
    bannerList.value = res.data;
  });
}

getBannerList();

function toViewByBanner(data: BannerFront) {
  if (data.toPath?.trim().length === 0) return;
  console.log(data);
  if (data.isInner) {
    router.push(data.toPath);
  } else {
    console.log("路径触发");
    window.open(data.toPath);
  }
}

// 跳转路由
function toView(type: string) {
  switch (type) {
    case "user": {
      router.push({
        path: "/basic/register",
        query: { type },
      });
      break;
    }
    case "business": {
      router.push({
        path: "/basic/register",
        query: { type },
      });
      break;
    }
    case "login": {
      router.push({
        path: "/basic/login",
      });
      break;
    }
    case "history": {
      router.push({
        path: "/history_collect?type=history",
      });
      break;
    }
    case "collect": {
      router.push({
        path: "/history_collect?type=collect",
      });
      break;
    }
    case "orders": {
      router.push({
        path: "/orders",
      });
      break;
    }
    case "address": {
      router.push({
        path: "/info",
        query: {
          tab: type,
        },
      });
      break;
    }
  }
}

// 获取问候语
function getGreeting() {
  // 创建一个日期对象
  const now = new Date();
  // 获取当前小时数（24小时制）
  const hour = now.getHours();

  // 根据时间决定问候语
  let greeting;
  if (hour < 12) {
    greeting = "早上好";
  } else if (hour < 18) {
    greeting = "下午好";
  } else {
    greeting = "晚上好";
  }
  return greeting;
}

//获取商品数据
const likeGoodsList = ref<GoodsEsDto[]>([]);

function getLikeGoods() {
  GoodsControllerService.getListWithEsUsingGet(1, 10).then((res) => {
    likeGoodsList.value = res.data || [];
  });
}

getLikeGoods();

// 公告标签类型
function getType(index: number) {
  switch (index) {
    case 1:
      return "danger";
    case 2:
      return "warning";
    case 3:
      return "primary";
    case 4:
      return "success";
    default:
      return "info";
  }
}

const openFlag = ref(false);
const noticeData = ref<NoticeVO>({});
const noticeList = ref<NoticeVO[]>([]);

//获取公告信息
function getNoticeList() {
  NoticeControllerService.getTop4NoticeWithUserUsingGet().then((res) => {
    noticeList.value = res.data || [];
  });
}

getNoticeList();

function openNoticeDialog(row: NoticeVO) {
  console.log("触发，", row);
  openFlag.value = true;
  noticeData.value = row;
}

function handleNoticeClose() {
  openFlag.value = false;
}
</script>

<style lang="scss" scoped>
#home {
  .home-1 {
    //border: 1px solid black;

    div {
      //border: 1px solid red;
    }

    .home-type,
    .home-info {
      background-color: #f5f5f5;
      border-radius: 15px;
      padding: 10px 20px;
    }

    .home-type {
      .type-text {
        border-bottom: solid 1px #f5f5f5;

        &:hover {
          color: #409eff;
          border-bottom: solid 1px #409eff;
        }
      }
    }
  }

  .home-2 {
    width: 90%;
    margin-top: 10px;
    left: 5%;
    position: absolute;
  }
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.home-icon {
  font-size: 24px;
  font-weight: bolder;
}

.border-radius-15 {
  border-radius: 15px;
}

:deep(.el-divider__text) {
  background-color: #f5f5f5;
}

//更改分段器
:deep(.el-segmented__item-selected) {
  border-radius: 16px;
}
</style>
